<template>
	<gracePage headerBG="#FFFFFF" :bounding="false">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">我的收货地址</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="">
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<view v-if="forData.length == 0">
				<graceEmptyNew>
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">暂无可用地址</text>
				</graceEmptyNew>
			</view>
			<view class="grace-list grace-margin-top" v-else :class="{'animate1':!graceFullLoading}">
				<view v-for="(item, index) in forData" :key="index">
					<view class="grace-common-line"></view>
					<view class="grace-list-items grace-body" @click="choose(item)">
						<view class="grace-list-body">
							<view class="grace-list-title">
								<text class="grace-list-title-text grace-h3">{{item.consignee}}</text>
								<text class="grace-list-title-desc your-icon iconbianji font-size-38" @click.stop="pageJumps('/pages/homeBox/addressEdit/addressEdit',item)"></text>
							</view>
							<view class="grace-list-body-desc"><text class="grace-red" v-if="item.defaults == 1">[默认]</text>{{item.province_name}}{{item.city_name}}{{item.district_name}}{{item.address}}</view>
							<view class="grace-list-title">
								<view class="grace-list-body-desc"><text class="pr-2">电话：</text><text>{{item.mobile}}</text></view>
								<text class="grace-list-title-desc your-icon iconshanchu font-size-38" @click.stop="removeAddress(item.address_id,index)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<graceDialog :isTitle="false" :show="show1" v-on:closeDialog="closeDialog1">
				<view class="content2" slot="content">
					<text class="grace-h4">确认即可删除当前地址，是否继续</text>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog1">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm2">确认</text>
				</view>
			</graceDialog>
			
		</view>
		<!-- 底部导航 -->
		<view class="grace-footer" slot="gFooter">
			<view class="pb-4 mx-3">
				<button type="primary" class="grace-button grace-tbr-large" @click="pageJumps('/pages/homeBox/addressAdd/addressAdd')">新增</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceFullLoading from "@/graceUI/components/graceFullLoading.vue";
import graceEmptyNew from "@/graceUI/components/graceEmptyNew.vue";
import graceDialog from '@/graceUI/components/graceDialog.vue';
import { mapState,mapMutations } from 'vuex';


export default {
    data() {
    	return {
			forData : [], //模拟的循环数据
			graceFullLoading : false,
			show1 : false,
			isChoose:false,
			indexObj:{}
		};
    },
	onShow:function(e){
	      uni.$on("submitInfo", res => {
			  if(res.result === 1002){
				  this.__init();
			  }
	          // 清除监听
	          uni.$off('submitInfo');
	      })
	},
	onLoad (e) {
		if (e.type === 'choose') {
			this.isChoose = true
		}
		
		this.__init();
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	methods:{
		...mapMutations(['getList']),
		async __init() {
			
			this.graceFullLoading = true;
			// let stat = await this.gotoLogin();
			let data = await this.$HTTP.post('/api/api.php', {"act": 'get_address'},{token:true});
			this.graceFullLoading = false;
			if(data.error) return ;
			this.forData = data.address;
			this.getList(data.address)
		},
		pageJumps(url,item){
			var text = url+'?item=' + JSON.stringify(item);
		    uni.navigateTo({
		    	url: text
		    });
		},
		removeAddress(id,index){
			this.show1 = true;
			this.indexObj = {
				id,index
			};
		},
		closeDialog1 : function(){
			this.show1 = false;
		},
		confirm2 : function(){
			let options = {
				user_id:this.userInfo.user_id || '',
				token:this.userInfo.token || '',
				address_id:this.indexObj.id,
				act:'del_address',
			}
			this.$HTTP.postStatus('/api/api.php', options).then(res=>{
				this.closeDialog1();
				this.forData.splice(this.indexObj.index,1);
				// 当修改之后要把新的数据重新传给 vuex
				this.getList(this.forData);
			})
		},
		// 选择收货地址
		choose(item){
			if (this.isChoose) {
				// 通知订单提交页修改收货地址
				uni.$emit('choosePath',item)
				// 关闭当前页面
				uni.navigateBack({
					delta: 1
				});
			}
		}
				
	},
	components:{gracePage,graceFullLoading,graceEmptyNew,graceDialog}
}
</script>
<style scoped>
	@import "@/graceUI/animate.css";
	/* 自定义动画效果、时间、循环 */
	.remove-list{animation:zoomOutLeft 1s linear;}
	.animate1{animation:fadeIn 1s linear;}
	
	.grace-common-line {
		height: 16rpx;
	}
	.empty-view{width:280rpx; height:280rpx; border-radius:280rpx;  margin-top:300rpx;}
	.empty-img{width:220rpx; height:200rpx; margin:40rpx; }
	.content2{padding:30rpx; padding-right:80rpx; line-height:50rpx;height: 80rpx; font-size:26rpx;}
	.grace-footer{
		 box-shadow:1px 1px 6px #FFFFFF;
	}
</style>